<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>

<html lang="en">
  <head>
    
  	<link href="resource/css/def/bootstrap/ace/ace.css" rel="stylesheet">
  	<link href="resource/css/def/bootstrap/ace/ace-part2.min.css" rel="stylesheet">
  	<link href="resource/css/def/bootstrap/ace/ace-ie.min.css" rel="stylesheet">
    <link href="resource/css/def/bootstrap/ace/font-awesome.css" rel="stylesheet">
    <link href="resource/css/def/frm/sys/main.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath}/resource/css/index.css" rel="stylesheet">
  	<script src="resource/js/bootstrap/ace/ace.js"></script>
	<script src="resource/js/bootstrap/ace/ace.sidebar.js"></script>
	<script src="resource/js/frm/sys/main.js"></script>
	
  	<script src="${pageContext.request.contextPath}/resource/js/echarts/echarts.min.js"></script>
	
</head>
	<style type="text/css">
	html,body{
		height:100%;
		margin:0px;
	}
	.content-full{
		height:calc(100% - 31px);
	}
	</style>
	<script type="text/javascript">
		var taskData;
		onload = function(){
			var mainInfo = '${mainInfo}';
			
			var obj = JSON.parse(mainInfo);
			initToDoList(obj.toDoTaskInfo);
			//系统消息提示初始化
			initSysInfo(obj);
			query();
		}
		function query(){
			$.post("${pageContext.request.contextPath}/frm/workflow/taskToDo?start=0&length=5",
				function(data) {
					//alert(data.data.length);
					taskDataList = data;
					
			});
		}
		function initToDoList(obj){
			var innerHtml = "";
			var i=0;
			$.each(obj, function (n, value) {
				innerHtml +="<a id=\"show\" =\"#\" class=\"list-group-item\" style=\"overflow:hidden; text-overflow:ellipsis; white-space:nowrap;width:100%;padding-right:80px;\" ";
				innerHtml +="title=\""+value.taskName+"\"";
				innerHtml +=">"
				innerHtml +=value.taskName;
				innerHtml +="</a>";  
				innerHtml +="<button onclick=\"showDetailTab(this);\"  id ="+value.procInstId+" class=\"button-sm-sm\"  style=\"position: absolute;margin-top: -32px;right: 15px;\"><span class=\"glyphicon glyphicon-pencil\"></span>处理</button>";
				i++;
	        });
			for(var j=i;j<4;j++){
				innerHtml +="<a id=\"show\" =\"#\" class=\"list-group-item\">&nbsp;</a>";
			}
			$("#toDoList").append(innerHtml); 
			
		}
		function initSysInfo(obj){
			var innerHtml = "";
			innerHtml +="<div class=\"schedule col-md-12\">目前有<span class=\"info-color\">"; 
			innerHtml +=obj.taskBzCount; 
			innerHtml +="</span>条工单需在<span class=\"info-color\">";
			innerHtml +=obj.dDate; 
			innerHtml +="</span>前完成备案工作，请及时处理！</div>";
			$("#sysInfo").append(innerHtml); 
		}
		function toDoTaskMore(_obj){
			var obj = $(_obj).clone();
			$(obj).text("待办列表");
			window.parent.showNewTab(obj);
		}

		function showDetailTab(_obj){
			var obj = $(_obj).clone();
			var id = $(obj).attr('id');
			for (var i = 0; i < taskDataList.data.length; i++){
				var processInstanceId = taskDataList.data[i].processInstanceId;
				if (id ==processInstanceId){
					// 模拟展示第一个
					taskData = taskDataList.data[i];
					break;
				}
			}
			
			var url = "workflow/taskToDoDetail?taskId=" + taskData.id + "&processDefinitionKey=" + taskData.processDefinitionKey + "&TaskDefinitionKey=" + taskData.taskDefinitionKey + "&processInstanceId=" + taskData.processInstanceId
					+ "&processDefinitionId=" + taskData.processDefinitionId + "&name=" + encodeURI(taskData.name) + "&executionId=" + taskData.executionId + "&title=" + encodeURI(taskData.title);
			$(obj).attr('data-info', url);
			$(obj).text("待办明细");
			window.parent.showNewTab(obj);
		}
		
	</script>
	<!--[if lt IE 9]>
		<script type="text/javascript">
			function contentHeight(){
				$('#tab_home_content').height($('html').height()-$('#navbar').height()-$('#tab_tablist').height()-80);
			}
		</script>
	<![endif]-->
	
  </head>
<body class="no-skin">
			<div style="height:100%;" class="main-content">
				<div class="page-content">
					<div class="row top-row">
						<div class="col-md-7" id="daiban">
							<div class="panel panel-default">
								<!-- Default panel contents -->
								<div class="panel-heading heiding-text"><img src="${pageContext.request.contextPath}/resource/images/代办.png" width="22">我的待办
									<button id="11123123" data-info="workflow/taskToDoList" onclick="toDoTaskMore(this);" class="button-sm button-right">More+</button>
								</div>
								<!-- List group -->
								<ul class="list-group" id ="toDoList">
                                    
								</ul>
							</div>
						</div>

						<div class="col-md-5">
							<div class="panel panel-default">
								<!-- Default panel contents -->
								<div class="panel-heading heiding-text"><img src="${pageContext.request.contextPath}/resource/images/订单.png" width="22">系统消息<button class="button-sm button-right">More+</button></div>
								<!-- List group -->
								<ul class="list-group">
									<a href="#" class="list-group-item">
                                        <div class="row" id="sysInfo">
											
                                        </div>
                                    </a>
                                    <a href="#" class="list-group-item">
										<div class="row">
											<div class="schedule col-md-12">&nbsp;</div>
										</div>
                                    </a>
                                    <a href="#" class="list-group-item">
										<div class="row">
											<div class="schedule col-md-12">&nbsp;</div>
										</div>
                                    </a>
                                    <a href="#" class="list-group-item">
										<div class="row">
											<div class="schedule col-md-12">&nbsp;</div>
										</div>
                                    </a>
								</ul>
							</div>
						</div>
					</div>
                    <div class="row">
						<div class="col-lg-12">
							<div class="nav-div">
								<div class="nav-tabs-div">
									<ul id="myTab" class="nav nav-tabs">
										<li class="active">
											<a href="#home" data-toggle="tab">
												电子公函统计A
											</a>
										</li>
									</ul>
								</div>
								<div id="myTabContent" class="tab-content" style="padding:0; height:300px;">
									<div class="tab-pane fade in active" id="home" align="center">
									
											<div id="echarts1"  style="width:50%;height:300px;float:left; "></div>
											<div id="echarts2"  style="width:50%;height:300px;float:right;"></div>
											
									</div>
									<div class="tab-pane fade" id="ios" align="center">
									</div>
									<div class="tab-pane fade" id="ios2" align="center">
									</div>
								</div>
							</div>
						</div>
						<!--<div class="col-lg-7">
							<div class="nav-div">
								<div class="nav-tabs-div">
									<ul id="myTab2" class="nav nav-tabs">
										<li class="active">
											<a href="#home2" data-toggle="tab">
												工程建设规模指标
											</a>
										</li>
										<li><a href="#ios2" data-toggle="tab">工单进度统计</a></li>
									</ul>
								</div>
								<div id="myTab2Content" class="tab-content" style="padding:0; height:300px;">
									<div class="tab-pane fade in active" id="home2" align="center">
									</div>
									<div class="tab-pane fade" id="ios2" align="center">
									</div>
								</div>
							</div>
						</div>-->
                    </div>
				</div>
			</div>
		</div>

			<!--模态框-->


            <script>
                $(document).ready(function (myModal) {
                    $("#checkModal").click(function () {
                        $("#myModal").slideDown();
                    })
                })
            </script>
            
            
       <script type="text/javascript">
      	 	var mainInfo = '${mainInfo}';
			var obj = JSON.parse(mainInfo);
         	// 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('echarts1')); 

            var option = {
                    tooltip: {
                        show: false
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : []
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "type":"bar",
                            "data":[]
                        }
                    ]
                };

 
            option.xAxis[0].data = obj.barXAxisData;
            option.series[0].data = obj.barSeriesData;

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            
            // 基于准备好的dom，初始化echarts图表
            var myChart2 = echarts.init(document.getElementById('echarts2')); 
            
            var option2 = {
                tooltip: {
                    show: false
                },
                legend: {
                    data:['销量']
                },
                series : [
                    {
                       
                        "type":"pie",
                        "data":[]
                    }
                ]
            };
            
            var picObj = obj.pieData;
            var arr = [];
            $.each(picObj, function (n, value) {
            	arr.push({//将数据存储为符合echarts饼形图规定的格式
					'value' : value.value,
					'name' : value.name
				});
			});
            option2.series[0].data = arr;//将值填充到饼形图中

            // 为echarts对象加载数据 
            myChart2.setOption(option2); 
				
        </script>
            

	</body>
</html>